<%--
  Created by IntelliJ IDEA.
  User: yangtao
  Date: 2017/7/12
  Time: 13:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="<%=path%>/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="<%=path %>/plugins/font-awesome/css/font-awesome.min.css" type="text/css"/>
    <script type="text/javascript" src="<%=path %>/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/core/helper.js"></script>
    <script src="<%=path%>/plugins/layui/layui.js"></script>
</head>
<body>
<form id="form" class="layui-form layui-form-pane" action="" style="padding: 10px">
    <input type="hidden" name="type" id="type" value="${type}"/>
    <c:if test="${empty resourceCustomType}">
        <input type="hidden" name="customTypeId" id="customTypeId"/>
    </c:if>
    <c:if test="${not empty resourceCustomType}">
        <input type="hidden" name="customTypeId" id="customTypeId" value="${resourceCustomType.custom_type_id}"/>
    </c:if>
    <div class="layui-form-item">
        <label class="layui-form-label">自定义名称</label>
        <div class="layui-input-block">
            <c:if test="${empty resourceCustomType}">
                <input name="customTypeName" id="customTypeName" lay-verify="customTypeName" placeholder="请输入分类名称"
                       autocomplete="off" class="layui-input" type="text">
            </c:if>
            <c:if test="${not empty resourceCustomType}">
                <input name="customTypeName" id="customTypeName" lay-verify="customTypeName" placeholder="请输入分类名称"
                       autocomplete="off" class="layui-input" type="text" value="${resourceCustomType.custom_type_name}"
                       readonly>
            </c:if>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">自定义编码</label>
        <div class="layui-input-block">
            <c:if test="${empty resourceCustomType}">
                <input name="customTypeCode" id="customTypeCode" lay-verify="customTypeCode" placeholder="请输入分类编码"
                       autocomplete="off" class="layui-input" type="text">
            </c:if>
            <c:if test="${not empty resourceCustomType}">
                <input name="customTypeCode" id="customTypeCode" lay-verify="customTypeCode" placeholder="请输入分类编码"
                       autocomplete="off" class="layui-input" type="text" value="${resourceCustomType.custom_type_code}"
                       readonly>
            </c:if>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input name="description" id="description" lay-verify="description" placeholder="请输入分类描述"
                   autocomplete="off" class="layui-input" type="text">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">自定义类容
        </label>
        <div style="background: #FFFFFF;padding-top: 10px;padding-left: 10px;padding-right: 10px">
            <button type="button" onclick="customAddPerms()" class="layui-btn layui-btn-mini">添加文本类型</button>
            <button type="button" onclick="addResourceSort()" class="layui-btn layui-btn-mini">添加选择类型</button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-small" onclick="addTips()"><i
                    class="layui-icon">&#xe607;</i></button>
            <hr style="background: #00acd6">
            <div id="perms" class="layui-input-block" style="padding: 10px">

            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <c:if test="${empty resourceCustomType}">
            <button id="savebt" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submitComm">新增保存</button>
            <button class="layui-btn layui-btn-primary" type="button" onclick="clearType()">清&nbsp;空</button>
        </c:if>
        <c:if test="${not empty resourceCustomType && isNotEdit != true}">
            <button id="savebt" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submitComm">修改保存</button>
            <button class="layui-btn layui-btn-primary" type="button" onclick="clearType()">清&nbsp;空</button>
        </c:if>
    </div>
</form>

<script>
    var form;
    layui.use(['form', 'laypage', 'layedit', 'element'], function () {
        form = layui.form();
        var reg = /^[A-Za-z]+$/;
        var regCode = /^[a-zA-Z_0-9]+$/;
        //自定义验证规则
        form.verify({
            customTypeName: function (value) {
                if (value.length < 2) {
                    return '自定义名称至少得2个字符!';
                }
            },
            customNames: function (value) {
                if (value.length < 2) {
                    return '自定义名称至少得2个字符!';
                }
            },
            customTypeCode: function (value) {
                if (value.length < 2) {
                    return '分类编码至少得2个字符!';
                }
                if (!regCode.test(value)) {
                    return '分类编码只能说英文、数字、下划线！';
                }
            },
            customKeys: function (value) {
                if (value.length < 2) {
                    return 'Key至少得2个字符!';
                }
                if (!reg.test(value)) {
                    return 'Key必须是英文！';
                }
            }
        });

        //小区添加提交
        form.on('submit(submitComm)', function (data) {
            postJson("<%=path%>/cms/resource/saveCustomType.x", $('#form').serialize(), function (data) {
                parent.queryCustomTypeList();
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });
            return false;
        });

        if (${not empty resourceCustomType} &&
        ${not empty resourceCustomType.custom_content})
        {
            var customContent = $.parseJSON('${resourceCustomType.custom_content}');
            for (var i in customContent) {
                customAddPerms(customContent[i]);
            }
        }
    });

    function customAddPerms(data, perms) {
        if (perms) {
            $(perms).parent().remove();
        }
        var customName, customKey, dataJson;
        if (data && data.customType === 'CMS_CUSTOM_SORT') {
            dataJson = JSON.stringify(data).replace(/\"/g, "'").toString();
            var sortCode = data.sortCode, sortListView = '', sortListJson = '';
            if (data.sortName) {
                customName = data.sortName;
            } else {
                customName = data.customName;
            }
            if (data.spinnerMap) {
                for (var key in data.spinnerMap) {
                    sortListView += '<option value=' + key + '>' + data.spinnerMap[key] + '</option>'
                }
                sortListJson = JSON.stringify(data.spinnerMap).toString();
            } else {
                sortListView = '<option value="-1">无</option>'
            }

            $("#perms").append(
                '<div>' +
                '<div style="float:left;">' + customName +
                '：<div class="layui-inline">' +
                '<input type="hidden"' +
                'name="sortNames" lay-verify="sortNames"  value = "' + customName + '"/>' +
                '<select name="' + sortCode + '">' + sortListView +
                '</select>' +
                '<input type="hidden"' +
                'name="spinnerMaps" lay-verify="spinnerMaps"  value = \'' + sortListJson + '\'/>' +
                '<input type="hidden"' +
                'name="sortCodes" lay-verify="sortCodes"  value = "' + data.customKey + '"/>' +
                '</div>' +
                '</div>' +
                '<button type="button" class="layui-btn"' +
                'onclick="addResourceSort(' + dataJson + ', this);">编&nbsp;辑</button>' +
                '<button type="button" class="permsRemove layui-btn layui-btn-danger" ' +
                'onclick="deletePerms(this);">删&nbsp;除</button>' +
                '<hr>' +
                '</div>'
            );
        } else {
            if (data && data.customName && data.customName.length > 1) {
                customName = 'value ="' + data.customName + '"';
                customKey = 'value ="' + data.customKey + '"';
            } else {
                customName = '';
                customKey = '';
            }

            $("#perms").append(
                '<div>' +
                '<div style="float:left;">' +
                '自定义名：<div class="layui-inline">' +
                '<input name="customNames" lay-verify="customNames" placeholder="请输自定义名"' + customName +
                ' autocomplete="off" class="layui-input" type="text">' +
                '</div>' +
                '</div>' +
                '<div style="float:left;">' +
                'key：<div class="layui-inline">' +
                '<input name="customKeys" lay-verify="customKeys" placeholder="请输入key"' + customKey +
                ' autocomplete="off" class="layui-input" type="text">' +
                '</div>' +
                '</div>' +
                '<button type="button" class="permsRemove layui-btn layui-btn-danger" style="margin-right:20px" ' +
                'onclick="deletePerms(this);">删&nbsp;除</button>' +
                '<hr>' +
                '</div>'
            );
        }
        form.render();
    }

    function deletePerms(perms) {
        layer.confirm('确定要删除此类型吗？', {
            btn: ['确定', '取消']
        }, function () {
            layer.closeAll();
            $(perms).parent().remove();
        });
    }

    var customSorts, customSortView;

    //添加操作类型
    function addResourceSort(data, view) {
        customSorts = data;
        customSortView = view;
        layui.layer.open({
            title: '添加操作类型',
            type: 2,
            area: ['700px', '500px'],
            fixed: false, //不固定
            maxmin: true,
            content: '<%=path%>/cms/resource/addResourceSort.x'
        })
    }

    function addTips() {
        layer.msg('<div>文本类型：为添加资源的时候增加一条自定义文本输入框</div>' +
            '<div>选择类型：为添加资源的时候增加一个下拉选择器，用于选择自定义的种类</div>', {
            time: 10000, //5s后自动关闭
            btn: ['知道了']
        });
    }

    function clearType() {
        $('#customTypeId').val('');
        $('#customTypeName').val('');
        $('#customTypeCode').val('');
        $('#perms').empty();
        $('#savebt').html('新增保存');
    }
</script>
</body>
</html>
